<template>
    <div class="shop">
        <nut-menu active-color="#196BFE">
            <template #icon>
                <TriangleDown />
            </template>
            <nut-menu-item v-model="brandId" @change="handleChange" :options="options">
            </nut-menu-item>
            <nut-menu-item v-model="price" :options="options1" @change="handleChange">
            </nut-menu-item>
        </nut-menu>
        <nut-tabs v-model="tab" title-scroll title-gutter="10" name="tab" direction="vertical" @click="changeTab">
            <nut-tab-pane v-for="(item, index) in classList" :title="item.catName">
                <div class="tab-list" v-if="tab == index">
                    <div class="tab-item" v-for="ele in goodsList" :key="ele.goodsId" v-if="goodsList.length > 0"
                        @click="jumpTo(ele)">
                        <div class="img">
                            <img :src="ele.goodsCoverImg" mode="aspectFit" alt="">
                        </div>
                        <div class="title">
                            <div>{{ ele.goodsName }}</div>
                            <div>
                                <text class="sell">{{ '￥' + ele.sellingPrice }}</text>
                                <text class="line" v-if="ele.sellingPrice != ele.originalPrice">
                                    {{ '￥' + ele.originalPrice }}</text>
                            </div>
                        </div>
                    </div>
                    <nut-empty v-else description="无数据"></nut-empty>
                </div>
            </nut-tab-pane>
        </nut-tabs>
    </div>
</template>

<script lang="ts">
import Taro from '@tarojs/taro'
import { useReachBottom } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { Category, CategoryPane } from "@nutui/nutui";
import { TriangleDown } from '@nutui/icons-vue-taro';
import { getAppCategories, carouseGoodsList, getBrandList } from '../../../api/index'
export default {
    components: {
        'nut-category': Category,
        'nut-category-pane': CategoryPane,
        TriangleDown
    },
    setup() {
        const data = reactive({
            pageNumber: 1,
            pageSize: 10,
            tab: 0,
            id: '',
            classList: [] as any[],
            goodsList: [] as any[],
            options: [] as any,
            brandId: '',
            options1: [
                { text: '默认排序', value: 0 },
                { text: '价格升序', value: 1 },
                { text: '价格降序', value: 2 }
            ],
            price: 0,
        });
        onMounted(() => {
            getAppCategories().then(res => {
                if (res.resultCode == 200) {
                    data.classList = [{ catName: '全部', catId: 99 }, ...res.data]
                    data.id = res.data[0].catId
                    getData(99)
                }
            })
            getbrands()
        });
        const getData = (id) => {
            carouseGoodsList({ id: id, pageNumber: data.pageNumber, pageSize: data.pageSize, brandId: data.brandId, price: data.price }).then(res => {
                if (res.resultCode == 200) {
                    res.data.forEach(item => {
                        data.goodsList.push(item)
                    });
                }
            })
        };
        const getbrands = () => {
            getBrandList().then(res => {
                if (res.resultCode == 200) {
                    data.options = [{ text: '筛选', value: '' }, ...res.data]
                    console.log(data.options)
                }
            })
        }
        const changeTab = (title) => {
            data.goodsList = []
            data.pageNumber = 1
            data.pageSize = 10
            data.brandId = ''
            data.price = 0
            let index = parseInt(title.paneKey)
            data.id = data.classList[index].catId
            // getbrands()
            getData(data.classList[index].catId)

        }
        const scrolltoLower = (e) => {
            //console.log(e, '滚动到底部上拉加载')
        }
        useReachBottom(() => {
            //console.log('onReachBottom')
            data.pageNumber++
            getData(data.id)
        })
        const jumpTo = (item) => {
            Taro.navigateTo({ url: '/packageA/pages/productDetail/index?goodsId=' + item.goodsId });
        }
        const handleChange = (val) => {
            data.goodsList = []
            getData(data.id)
        };
        return {
            getData,
            changeTab,
            scrolltoLower,
            jumpTo,
            handleChange,
            getbrands,
            ...toRefs(data)
        }
    }
};
</script>
<style lang="scss">
.shop {
    height: 100vh;

    .nut-tabs__titles-item__line {
        top: 53%;
    }

    .nut-tabs__content {
        min-height: 100vh;
    }

    .nut-tab-pane {
        padding: 0;
    }

    .tab-list {
        background: #F5F5F5;
        padding-top: 15rpx;

        .tab-item {
            display: inline-block;
            width: 48%;
            margin: 0 2% 15rpx 0;
            box-sizing: border-box;
            background: #fff;
            font-size: 24rpx;
            border-radius: 20rpx;
            vertical-align: top;

            .img {
                text-align: center;
                height: 260rpx;
                background: #fff;
                border-radius: 20rpx;

                img {
                    width: 80%;
                    height: 100%;
                }
            }

            .title {
                div:first-child {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    white-space: wrap;
                }

                div:last-child {
                    white-space: nowrap;

                    .sell {
                        color: #F25C26;
                        font-size: 30rpx;
                        font-weight: bold;
                    }

                    text.line {
                        text-decoration: line-through;
                        color: gray;
                        font-size: 26rpx;
                        margin-left: 10rpx;
                    }
                }



                padding: 0 20rpx 5rpx;
                color: #131313;
                height: 100rpx;
                margin-bottom: 10rpx;
            }

            .foot {
                padding: 0 20rpx 10rpx;

                .price {
                    color: #4C505C;
                    white-space: nowrap;

                    span {
                        font-size: 34rpx;
                    }
                }
            }
        }

        // .tab-item:nth-child(odd){
        //     margin-right: 2%;
        // }
    }
}
</style>